<template>
    <div class="">
     <h1>provideB.vue {孙子级别}</h1>
     <button @click="change">修改provide的值</button>

     <div class="box">
     </div>
     <hr>
    </div>
 </template>
 
 <script setup lang='ts'>
 import {ref ,Ref,reactive,inject} from 'vue'
const color = inject<Ref<string>>('color')
const change = ()=>{
    color!.value = 'yellow'
}
 </script>
 
 <style  scoped>
 .box{
     height: 50px;
     width:50px;
     border:1px solid #ccc;
    background: v-bind(color);

 }
 </style>